La propiedad text-shadow en enlaces

Hay a quien le gusta de vez en cuando cambiar la forma de mostrar los enlaces, lo hacemos en los estilos para conseguir distinto color, tamaño o tipo de fuente y en algunos casos añadimos alguna propiedad para crear un efecto.

Click En Enlace

Click En Enlace

En Impressive Webs nos indican los pasos a seguir para añadir sombra con la propiedad text-shadow y como ejemplo proporcionan los siguientes estilos:

a:link, a:visited {
color: #aaa;
text-decoration: none;
font-size: 36px;
text-shadow: 1px 1px 1px #555;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:hover {
color: #bbb;
}

a:active {
text-shadow: -1px -1px 1px #555;
position: relative;
top: 1px;
left: 1px;
}

Con esos estilos podemos jugar hasta conseguir que nuestros enlaces luzcan con sombra, pero queda la duda ¿dónde añadirlos? eso depende del sitio donde queremos mostrarlos.

Por ejemplo, para que el cambio afecte todos los enlaces del blog los añadiríamos en body, en una plantilla Minima veríamos los enlaces de la siguiente forma:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Sustituyendo lo marcado en color rojo por los estilos proporcionados en Impressive Webs obtendríamos el mismo resultado que el ejemplo que ilustra esta entrada

Si queremos añadir esos estilos en una entrada concreta bastaría con añadir los estilos en la misma entrada.

<style type='text/css'>
a.one:link, a.one:visited {
line-height: 24px;
color: #aaa;
text-decoration: none;
font-size: 36px;
text-shadow: 2px 2px 1px #555;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}

a.one:hover {
color: #bbb;
}

a.one:active {
text-shadow: 1px 1px 1px #555;
position: relative;
top: 1px;
left: 1px;
}

</style>

Y el enlace de la siguiente forma:

<a href="url-enlace" onclick="return false;" class="one">Texto enlace</a>